<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		li{
			list-style: none;
		}
		.box{
			width: 450px;
			height: 425px;
			background: #FF5F81 url() 0 0 no-repeat;
			border-radius: 20px;
			margin: 50px auto;
			padding-top: 25px;
		}
		ul{
			width: 390px;
			height: 390px;
			background: #E24365 url() 0 0 no-repeat;
			border-radius: 20px;
			margin: 0px auto;
			padding-top: 10px;
			padding-left: 10px;
		}

		li{
			width: 100px;
			height: 100px;
			background: #fff url() 0 0 no-repeat;
			float: left;
			margin-right: 10px;
			margin-bottom: 10px;
			border-radius: 5px;
			border: 10px solid #FFF;
			background-position: center;
			background-size: cover;
			/*border: 10px solid #FFFF02;*/
		}

	</style>

	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function  () {

			// var liarr = [0,1,2,5,8,7,6,3];

			// var num = 0;

			// var cn = 0
			// function run () {
				
			// 	$('li').eq(liarr[num]).css('border-color', '#FFFF02').siblings().css('border-color', '#FFF');

			// 	if(cn==rand){
			// 		clearInterval(time);
			// 		cn=0;
			// 	}

			// 	cn++;

			// 	if(num==7){
			// 		num=0
			// 	}else{
			// 		num++;
			// 	}

			// }


			// $('#btn').click(function(event) {
			// 	rand = Math.round(Math.random()*(50-30)+30);
			// 	console.log(rand);
			// 	time = setInterval(run, 100);
			// });
			// 
			
			var liarr = [0,1,2,5,8,7,6,3];//控制显示顺序

			var num = 0; //控制显示那一张

			var cn = 0;  //定时器100时候跑没多少次

			var jg = 1100; //定时间隔

			var is_add = true; //时间增减

			function run () {
				
				//根据num显示第几张
				$('li').eq(liarr[num]).css('border-color', '#FFFF02').siblings().css('border-color', '#FFF');

				//跑到最后一张的时间重新来
				if(num==7){
					num=0
				}else{
					num++;
				}

				// 当间隔时间大于1100，停止，把变量初始化
				if(jg>1100){
					num = 0;
					cn = 0;
					jg = 1100; 
					is_add = true;
					is_click =true;
					return;
				}


				//当间隔等于100的时间做匀速运行
				if(jg==100){
					
					//判断匀速次数
					if(cn==rand){
						is_add = false;
						jg +=200;
					}

					cn++;

					setTimeout(run, 100);

				}else{

					// 判断是间隔是增还是减
					if(is_add){

						jg -=200;

						setTimeout(run, jg);

					}else{

						jg +=200;

						setTimeout(run, jg);

					}
					
				}

			}

			is_click =true;//按钮不能重新点

			// 点击事件 
			$('#btn').click(function(event) {

				if(is_click){

					list = [40,41,42,43,44,45,46,47,40,40,40,40,41,41,40,41,42,43,44];

					index = Math.round(Math.random()*(19-1)+1);

					rand = list[index];

					// 以上为随机一个数

					// console.log(rand);return;
					run();

					is_click= false;

				}
				
			});



			
		})
	</script>
</head>
<body>
	<div class="box">
		<ul>
			<li style="background-image: url(./1.png);"></li>
			<li style="background-image: url(./2.png);"></li>
			<li style="background-image: url(./3.png);"></li>
			<li style="background-image: url(./4.png);"></li>
			<li id="btn" style="background-image: url(./buttonUp.png);"></li>
			<li style="background-image: url(./5.png);"></li>
			<li style="background-image: url(./6.png);"></li>
			<li style="background-image: url(./7.png);"></li>
			<li style="background-image: url(./8.png);"></li>
		</ul>
	</div>
</body>
</html>